<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="content-type" content="no-cache, must-revalidate"/>
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
    <title>笔记</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/my.css" rel="stylesheet">
    <link href="css/nav.css" rel="stylesheet">

    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="wrapper" v-cloak>
    <div class="container">
        <!-- 头部开始 -->
        <div class="nx-header">
            <div style="display: flex;width: 100%; height: 30px; line-height: 30px; background-color: #eee;">
                <div style="flex: 5; padding: 0 10px; color: orangered">
                    欢迎来到舒乐美食！
                </div>
                <div style="flex: 5; text-align: right">
                    <span v-if="user.name">
                    欢迎您，{{user.name}}
                    <a style="margin-right: 50px; color: blue" href="javascript:void(0)" @click="logout">退出</a>
                    </span>
                    <a v-if="!(user.name)" href="/end/page/login.html" target="_blank" style="margin-right: 10px; color: #666666">登录</a>
                    <a href="/end/page/register.html" target="_blank" style="margin-right: 30px; color: #666666">注册</a>
                </div>
            </div>

            <div style="height: 100px; padding-left: 10px; display: flex; justify-content: left;align-items: center;
                    color: orangered; font-size: 30px; font-family: 微软雅黑">
                舒乐美食
            </div>

            <div>
                <ul style="display: flex; background-color: orange; height: 30px">
                    <li class="nav-item"><a href="index.html">首页</a></li>
                    <li class="nav-item"><a href="advertiserInfo.html">系统公告</a></li>
					<li class="nav-item"><a href="foodsMenuInfo.html">菜谱</a></li>
<!--					<li class="nav-item"><a href="foodsMaterialInfo.html">食材</a></li>-->
					<li class="nav-item"><a href="collectInfo.html">收藏</a></li>
					<li class="nav-item"><a class="active" href="notesInfo.html">笔记</a></li>
					<li class="nav-item"><a href="newsInfo.html">饮食资讯</a></li>
					<li class="nav-item"><a href="messageInfo.html">趣味答题</a></li>

                    <li v-if="isShow" class="nav-item"><a href="/end/page/index.html" target="_blank">进入后台系统</a></li>
                </ul>
            </div>

        </div>
        <!-- 头部结束 -->
    </div>
    <div class="container"  style="margin-top: 20px">
        <div class="col-md-12">
            <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr style="background-color: #cccccc">
                    <th style="width: 50px">ID</th>
					<th>笔记名称</th>
					<th>上传时间</th>
					<th>上传人</th>

                    <th>详情</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(data,index) in tableData" :key="data.id">
                    <td>{{data.id}}</td>
					<td>{{data.name}}</td>
					<td>{{data.time}}</td>
					<td>{{data.userName}}</td>

                    <td><a :href=`notesInfoDetail.html?id=${data.id}` target="_blank">详情</a></td>
                </tr>
                </tbody>
            </table>
            <div style="text-align: center;">
                <nav aria-label="Page navigation example">
                    <ul class="pagination">
                        <li class="page-item" :class="{ disabled: preActive }">
                            <a class="page-link" href="javascript:void(0)"
                               @click="loadTable(pageInfo.pageNum - 1)">上一页</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="javascript:void(0)" v-if="pageInfo.pageNum > 1" @click="loadTable(pageInfo.pageNum - 1)">{{pageInfo.pageNum - 1}}</a>
                        </li>
                        <li class="page-item disabled">
                            <a class="page-link" aria-disabled="true" href="javascript:void(0)">{{pageInfo.pageNum}}</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="javascript:void(0)" v-if="pageInfo.hasNextPage" @click="loadTable(pageInfo.pageNum + 1)">{{pageInfo.pageNum + 1}}</a>
                        </li>
                        <li class="page-item" :class="{ disabled: nextActive }">
                            <a class="page-link" href="javascript:void(0)" @click="loadTable(pageInfo.hasNextPage? (pageInfo.pageNum + 1) : pageInfo.pageNum)">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.metisMenu.js"></script>
<script src="js/vue2.6.11/axios.js"></script>
<script src="js/vue2.6.11/vue.min.js"></script>

<script>
    new Vue({
        el: '#wrapper',
        data: {
            tableData: [],
            pageInfo: {},
            preActive: true,
            nextActive: true,
            user: {},
            isShow: false
        },

        created: function() {
            axios.get('/auth').then(res => {
                if (res.data.code === '0') {
                    this.user = res.data.data;
                    if (this.user.level !== 3) {
                        this.isShow = true;
                    }
                }
            });
            this.loadTable(1);
        },

        methods: {
            loadTable(pageNum) {
                axios.get("/notesInfo/page/all?status=1&pageSize=10&pageNum=" + pageNum).then(res => {
                    if (res.data.code === '0') {
                        this.tableData = res.data.data.list;
                        this.pageInfo = res.data.data;
                        this.preActive = !(this.pageInfo.hasPreviousPage);
                        this.nextActive = !(this.pageInfo.hasNextPage);
                    } else {
                        alert(res.data.msg);
                    }
                });
            },
            logout() {
                axios.get("/logout").then(res => {
                    if(res.data.code === '0') {
                        location.href = '/front/index.html';
                    } else {
                        msg('error', res.data.msg);
                    }
                })
            }
        }
    })
</script>
</body>
</html>
